﻿<style type="text/css">
    .mv-content{margin-top: 0px;}
    .odr-list{margin-top:87px;}
    .odr-list ul li{background: #fff;margin-top: 10px;overflow: hidden;}
    .odr-list .list-content{padding: 15px;}
    .odr-list .list-top{overflow: hidden;}
    .odr-list .top-left{float: left;}
    .odr-list .top-left p{color:#243d53;font-size: 14px;font-weight: 700 }
    .odr-list .top-left span{width:25px;height: 25px;border-radius: 50%;background:#4e6097;color: #fff;display: inline-block;text-align: center;line-height: 25px; margin-right: 5px;}
    .odr-list .top-right{float: right;height: 25px;line-height: 25px;}
    .odr-list .top-right span{color:#4e6097 }
    .odr-list .top-right span:nth-of-type(1){border-right: 1px solid #7583b6;padding-right: 10px;}
    .odr-list .top-right span:nth-of-type(2){padding-left: 10px;}
    .odr-list .list-middle{clear: both;margin-top: 10px;overflow: hidden;}
    .odr-list .list-middle span{margin-right: 10px;color: #7583b6;font-size: 13px;}
    .odr-list .middle-left{float: left;}
    .odr-list .middle-left p:nth-of-type(2){margin-top:2px;}
    .odr-list .middle-right{float: right;text-align: right;}
    .odr-list .middle-right p{color:#7583b6;font-size: 13px; }
    .odr-list .middle-right p:nth-of-type(2){font-size: 20px;color: #4e6097}
    .odr-list .list-bottom{clear: both;margin-top:10px;overflow: hidden;}
    .odr-list .bottom-left{float: left;padding-top: 5px;}
    .odr-list .bottom-left img{height: 20px;display: inline-block;margin-right: 5px;}
    .odr-list .bottom-right{float: right;}
    .odr-list .bottom-right a{padding: 5px 25px;background:#4e6097;color: #fff;display: inline-block;border-radius: 5px;}
</style>
<div class="mv-tabs-double">
    <a class="odr-fh" onclick="mview.view.load('/views/Home/main.html')">
        <i class="iconfont icon-fanhui1"></i>
    </a>
    <div class="odr-order">
        <a onclick="mview.view.load('/views/module/transaction/billadd.html')"><i class="iconfont icon-jia" style="color:#7785b7"></i></a>
    </div>
    <div class="odr-nava">
        <a onclick="mview.view.load('/views/module/transaction/buylists.html')">购买</a><a class="choose" onclick="mview.view.load('/views/module/transaction/selllists.html')">出售</a>
    </div>
    <div class="odr-navb">
        <ul>
            <li v-for="coin in bag.coins" v-cloak="">
                <a :class="'odr-navb-a-'+coin.id" v-on:click="choose($event,coin.id)" v-text="coin.code">-</a>
            </li>
        </ul>
    </div>
</div>
<div class="odr-list">
    <ul>
        <li v-for="data in bag.datas" v-cloak="">
            <div class="list-content">
                <div class="list-top">
                    <div class="top-left">
                        <p><span v-text="data.usercode">-</span><label v-text="data.username"></label></p>
                    </div>
                    <div class="top-right">
                        <span v-text="data.transactioncount">-</span>
                        <span v-if="data.transactioncount>0" v-text="(data.transactionactive/data.transactioncount*100) +'%'">-</span>
                        <span v-if="data.transactioncount<=0">100%</span>
                    </div>
                </div>
                <div class="list-middle">
                    <div class="middle-left">
                        <p><span>数量</span><span v-text="data.amount+' '+data.coincode">-</span></p>
                        <p><span>限额</span><span v-text="'¥' + data.amount_min + '-' + data.amount_max">-</span></p>
                    </div>
                    <div class="middle-right">
                        <p>单价</p>
                        <p v-text="'¥'+data.price">-</p>
                    </div>
                </div>
                <div class="list-bottom">
                    <div class="bottom-left">
                        <img v-if="data.pay_alipay" src="/Images/Icons/alipay.png">
                        <img v-if="data.pay_bank" src="/Images/Icons/bank.png">
                        <img v-if="data.pay_wechat" src="/Images/Icons/wechat.png">
                    </div>
                    <div class="bottom-right">
                        <a v-on:click="contract(data.id)">出售</a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div style="text-align:center;margin-top:0.5em;" v-if="bag.dataend == false" v-cloak="">
    <a v-on:click="more" v-text="morename" style="color:#888;">-</a>
</div>
<div style="text-align:center;margin-top:0.5em;" v-if="bag.dataend == true" v-cloak="">
    <a style="color:#aaa;">已显示所有</a>
</div>
<div style="height:60px;"></div>
<script type="text/javascript">
    var pagedata = {
        request: {
            method: "VIEW_TRANSACTION_SELLLISTS",
            coin: 1,
            page: 0,
            linkroot: true
        },
        screen: {
            header_display: false,
            footer_choose: "otc"
        },
        data: {
            morename: "查看更多"
        },
        oncreate: function () {
            m.view.node(".odr-navb-a-" + pagedata.request.coin).addClass("choose");
        },
        methods: {
            contract: function (id) {
                mview.view.load('/views/Module/Transaction/contract.html', {
                    id: id,
                    returnurl: "/views/Module/Transaction/selllists.html"
                });
            },
            choose: function (elm, coin) {
                m.view.node(".odr-navb a").removeClass("choose");
                m.view.node(elm.currentTarget).addClass("choose");
                pagedata.request.page = 0;
                pagedata.request.coin = coin;
                pagedata.reload();
            },
            //加载更多
            more: function () {
                pagedata.request.page += 1;
                mview.socket.send({
                    data: {
                        method: "VIEW_TRANSACTION_SELLLISTS",
                        page: pagedata.request.page,
                        coin: pagedata.request.coin,
                        part: 1
                    },
                    success: function (json) {
                        if (json.Code == 0 && json.Data.datas.length > 0) {
                            for (var i in json.Data.datas) {
                                var data = json.Data.datas[i];
                                mview.vue.stage.$data.bag.dataend = json.Data.dataend;
                                mview.vue.stage.$data.bag.datas.push(data);
                            }
                        }
                    }
                });
            }
        }
    }
    mview.view.chlid.init(pagedata);
</script>